<script lang="ts">
export default {
  data() {
    return {
      age: 18,
      timerId: 0
    }
  },
  // 1. 创建
  beforeCreate() {
    console.log('组件创建之前-beforeCreate()')
  },
  created() {
    console.log('组件创建之后-created()')
    this.timerId = setInterval(() => {
      this.age++
      console.log(this.age)
    }, 1000)
  },
  // 2. 挂载
  beforeMount() {
    console.log('组件挂载之前-beforeMount()')
  },
  mounted() {
    console.log('组件挂载之后-mounted()')
  },
  // 3. 更新
  beforeUpdate() {
    console.log('数据已经更新, 但视图还没有更新- beforeUpdate()')
  },
  updated() {
    console.log('数据已经更新, 视图也更新- updated()')
  },
  // 4. 销毁
  beforeUnmount() {
    console.log('销毁之前- beforeUnmount()')
    clearInterval(this.timerId)
  },
  unmounted() {
    console.log('销毁之后- unmounted()')
  }
}
</script>

<template>
  <div class="box">
    子组件
    <p>年龄: {{ age }}</p>
  </div>
</template>

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>